.leftnav-container {
    position: fixed; 
    top: $navbar-height; 
    height: calc( 100vh - $navbar-height );
    background-color: var(--webapp-nav-bg);
    max-width: $left-nav-w;
    padding-top: 0px;
    z-index: $zindex-fixed;
    box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.30);

    @include media-breakpoint-down(lg) {
        display: none;
    }
}

.leftnav {
    @extend .navbar;
    max-width: 260px;
    min-width: $left-nav-w-collapsed;

    border: none;
    align-items: start;
    background-color: inherit;

    @include media-breakpoint-down(lg) {
        background-color: #{$gray-900}
    }
}

div[data-controller="navigation-left-nav-web-app"] {
    .menu-container {
        transition: width $animation-timer;
        &.expanding, &.expanded {
            width: 220px;
        }
        &.collapsing, &.collapsed {
            width: 45px;
        }
    }

    .btn-left-nav-toggle {
        --bs-btn-padding-x: 0px;
        display: flex;
        justify-content: start;
        font-weight: $font-weight-bold;
    
        color: #{$gray-100};
    
        border-radius: 0px;
        --bs-btn-border-color: transparent;
        border: 0px;
    
        --bs-btn-active-color: #{$gray-100};
        --bs-btn-hover-color: #{$gray-100};
    }
    
    .left-nav-toggle-icon {
        margin-left: 12px;
        margin-right: 0px;
    
        transition: all $animation-timer;
        &.collapsing {
            transform: rotate(-180deg);
        }
    
        &.collapsed {
            transform: rotate(-180deg);
        }
    
        &.collapsing {
            height: auto !important;
        }
    }
}


@keyframes collapse-margin {
    from {
        margin-left: calc($left-nav-w - 9rem);
        margin-right: 0px;
    }
    to {
        margin-left: calc($left-nav-w-collapsed/2 - 32px);
        margin-right: calc($left-nav-w-collapsed/2 - 32px);
    }
}
@keyframes expand-margin {
    from {
        margin-left: calc($left-nav-w-collapsed/2 - 32px);
        margin-right: calc($left-nav-w-collapsed/2 - 32px);
    }
    to {
        margin-left: calc($left-nav-w - 9rem);
        margin-right: 0px;
    }
}

.menu-item {
    button, a {
        padding: 8px 24px 8px 12px;
    }
}
